<script setup>

import {onMounted, ref} from "vue";
import {doGet} from "../http/httpRequest.js";
import {showMessage} from "../util/utils.js";

let tranList = ref([{
  clueDO : {},
  ownerDO : {},
  stageDO : {}
}])
//分页时总共有多少条数据
let total = ref(0)
//分页时每页显示多少条数据
let pageSize = ref(0)

onMounted(() => {
  loadTranByPage(1)
})

const loadTranByPage = (current) => {
  doGet('/api/trans', {
    current : current //前面的current是参数名，后面的current是参数值
  }).then(resp => {
    if (resp.data.code === 200) {
      tranList.value = resp.data.data.list;
      total.value = resp.data.data.total;
      pageSize.value = resp.data.data.pageSize;
    } else {
      showMessage('数据加载失败', 'error');
    }
  })
}

//分页函数
const toPage = (value) => {
  loadTranByPage(value);
}
</script>

<template>
  <el-table
      :data="tranList"
      style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="tranNo" label="交易流水号"/>
    <el-table-column property="ownerDO.name" label="姓名"/>
    <el-table-column property="clueDO.fullName" label="姓名"/>
    <el-table-column property="clueDO.phone" label="手机"/>
    <el-table-column property="money" label="交易金额"/>
    <el-table-column property="expectedDate" label="预计成交时间"/>
    <el-table-column property="stageDO.typeValue" label="交易阶段"/>
    <el-table-column property="nextContactTime" label="下次跟踪时间"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination :background="true"
                 layout="prev, pager, next, jumper, ->, total"
                 :total="total"
                 :page-size="pageSize"
                 @current-change="toPage"/>
</template>

<style scoped>
.el-table {
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>